<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="./css/index.css" rel="stylesheet">
  <style>
    h1 {
      color: #000;
    }

    svg {
      min-width: 600px;
      min-height: 400px;
      overflow: auto;
    }
  </style>
</head>
<body>
<h1>SVG Polygon</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0 0 L100 0 L100 200 Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="lineAB" d="M 100,350 l 150,-300" stroke="red"
        stroke-width="1" fill="none"/>
  <path id="lineBC" d="M 250,50 l 150,300" stroke="red"
        stroke-width="1" fill="none"/>
  <path d="M 175,200 l 150,0" stroke="green" stroke-width="1"
        fill="none"/>
  <path d="M 100,350 q 150,-300 300,0" stroke="blue"
        stroke-width="1" fill="none"/>
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="1"/>
    <circle id="pointB" cx="250" cy="50" r="1"/>
    <circle id="pointC" cx="400" cy="350" r="1"/>
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
     text-anchor="middle">
    <text x="100" y="350" dx="-30" dy="12">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30" dy="12">C</text>
  </g>
</svg>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="./js/d3.v4.min.js"></script>
<script src="./js/svg.js"></script>
</body>
</html>